<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
		.wrap{
			position: relative;
			width: 200px;
			left: 50px;
			top: 50px;
		}
		ul{
			padding: 15px 0;
			margin:  9;
			list-style: none;
			background: #6c6669;
			color: #fff;
			border-right-width: 0;
		}
		li{
			display: block;
			height: 30px;
			line-height: 30px;
			padding-left: 12px;
			cursor: pointer;
			font-size: 14px;
			position: relative;
		}
		li.active{
			background: #999395;
		}
		li span:hover{
			color: #c81623;
		}
		.none{
			display: none;
		}
		#sub{
			width: 600px;
			position: absolute;
			border: 1px solid #f7f7f7;
			background: #f7f7f7;
			box-shadow: 2px 0 5px rgba(0,0,0,.3);
			left: 200px;
			top: 0;
			box-sizing:border-box;
			margin: 0;
			padding: 10px;
		}
		.sub_content a{
			font-size: 12px;
			color: #666;
			text-decoration: none;
		}
		.sub_content dd a{
			border-left: 1px solid #e0e0e0;
			padding: 0 10px;
			margin: 4px 0;
		}
		.sub_content dl{
			overflow: hidden;
		}
		.sub_content dt{
			float: left;
			width: 70px;
			font-weight: bold;
			clear: left;
			position: relative;
		}
		.sub_content dd{
			float: left;
			margin-left: 5px;
			border-top: 1px solid #eee;
			margin-bottom: 5px;
		}
		.sub_content dt i{
			width: 4px; 
			height: 14px;
			font: 400 9px/14px consolas;
			position: absolute;
			right: 5px;
			top: 5px;
		}

    </style>
    
    <body>
    <div class="wrap" id="test">
    
    	<ul style="border:1px solid red">
    		<li data-id="a">
    			<span>家用电器</span>
    		</li>
    		<li data-id="b">
    			<span>手机/运营商/数码</span>
    		</li>
    		<li data-id="c">
    			<span> 电脑/ 办公</span>
    		</li>
    		<li data-id="d">
    			<span> 家居/ 家具/ 家装/ 厨具</span>
    		</li>
    		<li data-id="e">
    			<span> 男装/ 女装/ 童装/ 内衣</span>
    		</li>
    		<li data-id="f">
    			<span>美妆个护/ 宠物</span>
    		</li>
    		<li data-id="g">
    			<span>女鞋/ 箱包/ 钟表/ 珠宝</span>
    		</li>
    		<li data-id="h">
    			<span> 男鞋/ 运动/ 户外</span>
    		</li>
    		<li data-id="i">
    			<span> 汽车/ 汽车用品</span>
    		</li>
    	</ul>
    	<div id="sub" class="none">
    		<div id="a" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>


    		<div id="b" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视1<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>


    		<div id="c" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视2<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>

			<div id="d" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视3<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>

			<div id="e" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视4<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>
				
			<div id="f" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视5<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>
  			
  			<div id="g" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视6<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>

			
			<div id="h" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视7<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>



			<div id="i" class="sub_content none">
    			<dl>
    				<dt>
    					<a href="#">电视8<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">空调<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>

    			<dl>
    				<dt>
    					<a href="#">洗衣机<i>&gt</i></a>
    				</dt>
    				<dd>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    					<a href="#">合资产品</a>
    				</dd>	
    			</dl>
    		</div>

    	</div>
    </div>
    <script type="text/javascript" src="../jquery-1.12.4.min.js"> </script>
    <script type="text/javascript" src="3wuyanchi.js"></script>
    <script type="text/javascript" src="gongjuhanshu.js"></script>
    </body>
</html>